<template>
  <el-dialog
    v-model="showFileDialog"
    title="文件列表"
    width="800px"
    :close-on-click-modal="false"
  >
    <div v-if="currentRecording" class="file-list-header">
      <div class="file-info">
        <span class="file-name">{{ currentRecording.name }}</span>
        <span class="file-size">{{ formatFileSize(currentRecording.size) }}</span>
      </div>
    </div>
    
    <el-table
      v-loading="loadingFiles"
      :data="currentFiles"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="文件名" width="300" />
      <el-table-column prop="path" label="文件路径" width="400" />
      <el-table-column prop="size" label="大小" width="120">
        <template #default="scope">
          {{ formatFileSize(scope.row.size) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" class="action-cell">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            icon="Download"
            @click="downloadFile(scope.row)"
            title="下载"
          />
          <el-button
            type="text"
            size="small"
            icon="Delete"
            @click="deleteFile(scope.row)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { useRecordingClipping } from './useRecordingClipping'

// 使用录制拆条功能钩子
const {
  showFileDialog,
  currentRecording,
  loadingFiles,
  currentFiles,
  downloadFile,
  deleteFile,
  formatFileSize
} = useRecordingClipping()

// 关闭对话框
const closeDialog = () => {
  showFileDialog.value = false
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  // 可以在这里处理多选逻辑
}
</script>

<style scoped>
.file-list-header {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.file-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-name {
  font-weight: 500;
  color: #303133;
}

.file-size {
  color: #606266;
  font-size: 14px;
}

.action-cell {
  display: flex;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>